<template>
  <div class="music-box">
    <!--<audio id="music" src="./media/bg.mp3" autoplay loop hidden></audio>-->
    <div class="icon-music" :class="{'ani-music' : isPlay , 'no' : !isPlay}" @click="changeMusic($event)"></div>
  </div>
</template>

<script>
  export default {
    name: "automusic",
    data () {
      return {
        isPlay : true
      }
    },
    mounted() {
      //自动播放音乐
      const audio = document.getElementById('music')
      if(this.$global.Is.Wx()){
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.play();
        }, false);
      }else{
        audio.play();
      }
    },
    methods : {
      changeMusic(e){
        const audio = document.getElementById('music')
        if(this.isPlay){
          this.isPlay = false
          audio.pause();
        }else{
          this.isPlay = true
          audio.play();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .icon-music{position: fixed;width: rem(40);height: rem(40);top: rem(30);left: rem(30);background: url("./img/music_on.png") center / contain;z-index: 10;}
  .icon-music.no{background-image: url("./img/music_off.png");}

  //动画命名
  .ani-music{animation: ani-music 2s linear infinite;}
  //音乐播放转动
  @keyframes ani-music {
    100% {
      transform: rotate(360deg);
    }
  }
</style>
